/*
* @Description:主机管理
* @Author: lil
* @Date: 2021/11/19
**/
<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item label="主机名称">
        <el-input v-model="hostName" placeholder="请输入主机名称"></el-input>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="userName" placeholder="请输入用户名称"></el-input>
      </el-form-item> -->
      <!-- <el-form-item class="fr">
        <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item> -->
    </el-form>
    <el-button size="mini" type="primary" icon="el-icon-plus" class="mb10" @click="dialogVisible=true">添加</el-button>
    <!-- 表格 -->
    <el-table :data="listData" border tooltip-effect="dark">
      <el-table-column label="序号" type="index" width="70" align="center">
      </el-table-column>
      <el-table-column prop="mark" label="别名" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ip" label="服务器IP" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="name" label="用户名" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="password" label="密码" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input class="hide-number" readonly type="password" :value="scope.row.password"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="iconfont zfsoft-shanchu" @click="deleteData(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination background :page-sizes="[100, 200, 300, 400]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination> -->
    <!-- 新增弹窗 -->
    <el-dialog v-if="dialogVisible" title="新增" :before-close="handleClose" :close-on-click-modal="false"
      :visible.sync="dialogVisible" width="40%">
      <host-manage-add @closeadd='closeadd' v-loading="isLoading" element-loading-text="主机尝试连接中"
        @setLoading="setLoading"></host-manage-add>
    </el-dialog>
  </div>
</template>
<script>
  import hostManageAdd from './hostManageAdd'
  import {
    getHostList,
    deleteHost
  } from '@/api/blockchain/deployhost'
  export default {
    components: {
      hostManageAdd
    },
    data() {
      return {
        //主机名
        hostName: '',
        //用户名
        userName: '',
        listData: [],
        dialogVisible: false,
        isLoading: false
      };
    },

    mounted() {
      this.gethostList()
    },

    methods: {
      closeadd() {
        this.dialogVisible = false
        this.gethostList()
      },
      gethostList() {
        var _this = this;
        getHostList().then(function (res) {
          _this.listData = res;
        })
      },
      deleteData(row) {
        this.$confirm('确认删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          deleteHost(row.mark, row.ip, row.name, row.password).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.gethostList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleClose(done) {
        if (!this.isLoading) {
          done();
        }
      },
      setLoading(val) {
        this.isLoading = val;
      },
    }
  };

</script>
<style lang="scss" scoped>
  .hide-number {

    &>>>.el-input__inner {
      border: 0;
      cursor: context-menu;
      background: transparent;
      text-align: center;
    }
  }

</style>
